<template>
	<div class='modal-dialog'>
		<div class='modal-content' v-if="shoppingType == 0">
			<div class='modal-header header'>
				<span class='title'>编辑订单</span>
				<span class='modal-cancel-btn' @click='_hideDialog'>取消</span>
			</div>
			<div class='modal-body'>
				<!--商品概要  -->
				<div class='goods-intro-container'>
					<div class='goods-synopsis'>
						<span class='good-title'>{{goodsDetails.goods_name}}</span>
						<span class='sub-goods-title'>{{goodsDetails.delivery_description?goodsDetails.delivery_description: ""}}</span>
						<span class='goods-price'>￥{{goodsDetails.selectedPrice}}</span>
					</div>
					<div class='goods-thumb-container'>
						<img class='goods-thumb' :src='goodsDetails.goods_image' />
					</div>
				</div>
				<!--商品规格  -->
				<div class='goods-specification'>
					<!--选中的样式 goods-active  -->
					<span v-for="(item,index) in goodsDetails.spec" :class='index === goodsDetails.defaultSpecIndex ? "goods-active" : ""' :key="index" @click='_changeSpec($event,item,index)' :data-spec-index="index">{{item.sp_value_name}}</span>
				</div>
				<!--选择数量  -->
				<div class='select-quantity' v-if="chooseBuyType.chooseBuyMethod != 1">
					<img class='select-num-btn' src='../../../../static/img/minus.png' @click='_minusGoodsNum' />
					<span class='selected-num'>{{ goodsDetails.spec[goodsDetails.defaultSpecIndex].count }}</span>
					<img class='select-num-btn' src='../../../../static/img/plus.png' @click='_addGoodsNum' />
				</div>
				<!--如果有搭配购买显示  -->
				<div class='macth-buy-container' @click="_show_modal_buy" v-if="chooseBuyType.chooseBuyMethod != 1 && goodsDetails.collocation && goodsDetails.collocation.length > 0">
					<img class='icon-diamond' src='../../../../static/img/diamond.svg' />
					<span class='macth-explain' v-if="goodsDetails.selectedMatch"> 已经选择<span style='color: #EF364E;padding: 0 7px;'>{{goodsDetails.selectedMatch.length }}</span>款搭配产品</span>
					<span class='macth-explain' v-else>购买搭配产品</span>
					<div class='flex-grow'></div>
					<img class='icon-triangle' src='../../../../static/img/triangle.svg' />
				</div>
				<!-- 有拼团则显示 -->
				<div class='group-people-container' v-if="goodsDetails.goods_label == 2 && chooseBuyType.chooseBuyMethod == 2 ">
					<span class='group-people-title'>支付并邀请朋友拼团，人数不足将自动退款</span>
					<div class='group-people-list'>
						<img v-for="(item,index) in memberAvatarList" class='group-people-avatar' :key="index" :src='item' />
					</div>
				</div>
			</div>
			<!-- 普通买法 -->
			<div class='modal-footer' v-if="chooseBuyType.chooseBuyMethod == 0">
				<div class='add-cart' @click='_addCartHandle'>
					<span>加入购物车</span>
				</div>
				<div class='go-buy' @click='_goBuyGoods'>
					<span>￥{{goodsDetails.totalPrice}}定制</span>
				</div>
			</div>
			<!-- 月定制买法 -->
			<div class='modal-footer' v-else-if="chooseBuyType.chooseBuyMethod == 1">
				<span class='big-confirm-btn' @click='_showSelectMonth'>选择月份</span>
			</div>
			<!--拼团买法-->
			<div class='modal-footer' v-else-if="chooseBuyType.chooseBuyMethod == 2">
				<span class='big-confirm-btn' @click='_goBuyGoods'>￥{{goodsDetails.selectedPrice * goodsDetails.spec[goodsDetails.defaultSpecIndex].count}}定制</span>
			</div>
			<!--众筹买法-->
			<div class='modal-footer' v-else-if="chooseBuyType.chooseBuyMethod == 3">
				<span class='big-confirm-btn' @click='_goBuyGoods'>￥{{goodsDetails.selectedPrice * goodsDetails.spec[goodsDetails.defaultSpecIndex].count}}定制</span>
			</div>
		</div>
		<!--　月定制　-->
		<div class='modal-content' v-else-if="shoppingType == 1">
			<div class='modal-header header'>
				<span class='title'>编辑订单</span>
				<span class='modal-cancel-btn' @click='_hideDialog'>取消</span>
			</div>
			<div class='modal-body month-custom-bottom-line'>
				<scroll-y class='month-scroll' :data="goodsDetails.serializeMonth">
					<span class='month-custom-explain'>需满3个月起订，将会在每月24日发货</span>
					<div class='month-scroll-item' v-for="(item,index) in goodsDetails.serializeMonth" :key="item.month" @click='_toggleMonthNum(item.month)'>
						<div class='icon-circle' :data-month='item.month'>
							<img src='../../../../static/img/fill_success.svg' class='select' v-if="item.count > 0" />
						</div>
						<span> {{item.year}}年{{item.month}}月</span>
						<div class='flex-grow'></div>
						<div class="select-month" v-if="item.count > 0">
							<img class='select-num-btn' src='../../../../static/img/minus.png' @click.stop='_minusMonthNum(item.month)' :data-month='item.month' />
							<span class='month-selected-num'>{{item.count}}</span>
							<img class='select-num-btn' src='../../../../static/img/plus.png' @click.stop='_addMonthNum(item.month)' :data-month='item.month' />
						</div>
						<span v-else class='month-no-num'>0</span>
					</div>
				</scroll-y>
			</div>
			<div class='modal-footer' @click='_monthCustomBuy'>
				<span class='big-confirm-btn'>￥{{goodsDetails.totalPrice}}定制</span>
			</div>
		</div>
		<!-- 搭配购的弹窗　-->
		<div class='modal-content' v-else-if="shoppingType == 2">
			<div class='modal-header header'>
				<span class='title'>编辑订单</span>
				<span class='modal-cancel-btn' @click='_hideDialog'>取消</span>
			</div>
			<div class='modal-body month-custom-bottom-line'>
				<div class='modal-body'>
					<div v-for="(item,index) in goodsDetails.collocation" :key="item.goods_id">
						<div class='macth-goods-item'>
							<!--商品概要  -->
							<div class='goods-intro-container'>
								<div class='goods-thumb-container'>
									<img class='goods-thumb' :src='item.goods_image' />
								</div>
								<div class='goods-synopsis'>
									<span class='good-title'>{{item.goods_name}}</span>
									<span class='goods-price'>￥{{item.spec[0].goods_collocation_price}}</span>
								</div>
							</div>
						</div>
						<!-- 规格 -->
						<div class='goods-specification'>
							<span v-for="(spec,index) in item.spec" :class=' index === goodsDetails.defaultSpecIndex ? "goods-active" : ""' :key="spec.sp_id" catchtap='_changeMatchSpec' :data-match-id='item.goods_id' :data-spec-index="index">{{spec.sp_value_name}}</span>
						</div>
						<!--选择数量  -->
						<div class='select-quantity'>
							<img class='select-num-btn' src='../../../../static/img/minus.png' :data-match-index='index' @click='_matchMinus(index)' />
							<span class='selected-num'>{{item.count ? item.count : 0 }}</span>
							<img class='select-num-btn' src='../../../../static/img/plus.png' :data-match-index='index' @click='_matchAdd(index)' />
						</div>
					</div>
				</div>
				<div class='modal-footer'>
					<span class='big-confirm-btn' @click='_macthConfirm'>确定</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import { Toast } from 'mint-ui';
	import server from '@/server/api';
	import ScrollY from '@/base/scroll-y/scroll-y'

	export default {
		props: {
			chooseBuyType: {
				type: Object
			}
		},
		data() {
			return {
				shoppingType: 0,
				isShowSelectQuantity: true,
				goodsInfo: null,
				confirmOrderData: {},
				goodsArr: [],
				params: {}
			}
		},
		computed: {
			...mapState(['goodsDetails', 'memberAvatarList'])
		},
		mounted() {
			this._setSelectedPrice();
			if(this.goodsDetails) {
				// 因为原本的对象中没有 selectedPrice defaultSpecIndex 相当于改变对象的长度，所以需要this.set
				// 例子：https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
				this.$set(this.goodsDetails, "totalPrice", this.goodsDetails.spec[0].goods_price)
			}
		},
		created() {},
		methods: {
			...mapMutations(['_getSerializeMonth']),
			...mapActions(['getShoppingList', 'getSelectGoods']),
			_hideDialog() {
				this.$emit("showModel", false);
				this.isMonth = false;
			},
			_addGoodsNum() {
				const _this = this;
				let spec = _this.goodsDetails.spec;
				const specIndex = _this.goodsDetails.defaultSpecIndex
				const storeNum = spec[specIndex].goods_storage;
				let count = spec[specIndex].count;
				if(count < storeNum) {
					count++;
					spec[specIndex].count = count;
					this.$set(this.goodsDetails, "spec", spec)
				}
				this.$set(this.goodsDetails, "totalPrice", count * this.goodsDetails.selectedPrice)
			},
			_minusGoodsNum() {
				const _this = this;
				let spec = _this.goodsDetails.spec;
				const specIndex = _this.goodsDetails.defaultSpecIndex
				const storeNum = spec[specIndex].goods_storage;
				let count = spec[specIndex].count;
				if(count > 1) {
					count--;
					spec[specIndex].count = count;
					this.$set(this.goodsDetails, "spec", spec)
				} else {
					Toast("别再减了！")
				}
				this.$set(this.goodsDetails, "totalPrice", count * this.goodsDetails.selectedPrice)
			},
			_changeSpec(event, item, index) {
				const _this = this;
				const goodsDetails = _this.goodsDetails;
				let spec = goodsDetails.spec;
				//查找当前点击规格的库存 如果为0 则不重新设置
				if(spec[index].goods_storage && spec[index].goods_storage > 0) {
					_this.$set(_this.goodsDetails, "defaultSpecIndex", index)
					_this._setSelectedPrice();
				}
				// 如果是月定制重置 月份数量为0
				if(_this.chooseBuyType.chooseBuyMethod == 1) {
					_this._getSerializeMonth();
				}
				this.$set(this.goodsDetails, "totalPrice", spec[index].count * this.goodsDetails.selectedPrice)
			},
			_goBuyGoods() {
				const _this = this;
				const goodsInfo = _this.goodsDetails;
				const selectedSpec = goodsInfo.spec[goodsInfo.defaultSpecIndex];
				let goodsArr = [{
					goods_id: goodsInfo.goods_id,
					goods_name: goodsInfo.goods_name,
					goods_image: goodsInfo.goods_image,
					num: selectedSpec.count,
					spec_name: selectedSpec.sp_value_name,
					sp_value_id: selectedSpec.sp_value_id,
					goods_price: goodsInfo.selectedPrice,
					is_collocation: 1
				}];
				if(goodsInfo.collocation) {
					for(var i = 0; i < goodsInfo.collocation.length; i++) {
						var collocation = goodsInfo.collocation[i];
						if(collocation.count && collocation.count > 0) {
							goodsArr.push({
								goods_id: collocation.goods_id,
								goods_name: collocation.goods_name,
								goods_image: collocation.goods_image,
								num: collocation.count,
								spec_name: collocation.spec[collocation.defaultSpecIndex].sp_value_name,
								sp_value_id: collocation.spec[collocation.defaultSpecIndex].sp_value_id,
								goods_price: collocation.spec[collocation.defaultSpecIndex].goods_collocation_price,
								is_collocation: 2
							})
						}
					}
				}
				let confirmOrderData = {
					"chooseBuyMethod": _this.chooseBuyType.chooseBuyMethod,
					"from": "goodsDetails",
					"data": goodsArr,
					"totalPrice": selectedSpec.count * goodsInfo.selectedPrice
				};
				// 请求订单数据
				this.getSelectGoods(confirmOrderData);
				this.$router.push('/comfirmOrderDetail')
			},
			_addCartHandle() {
				// 加入购物车
				const _this = this;
				const goodsInfo = _this.goodsDetails;
				var specIndex = goodsInfo.defaultSpecIndex;
				let param = {};
				if(goodsInfo.goods_label == 0) {
					param = {
						member_id: 101076,
						collocation: "collocation",
						collocation_info: [{
							goods_id: goodsInfo.goods_id,
							num: goodsInfo.num,
							sp_value_id: goodsInfo.spec[specIndex].sp_value_id,
							is_collocation: 1
						}]
					};
					for(var i = 0; i < goodsInfo.collocation.length; i++) {
						var collocation = goodsInfo.collocation[i];
						var collocationSpecIndex = collocation.defaultSpecIndex;
						if(collocation.count && collocation.count > 0) {
							param.collocation_info.push({
								goods_id: collocation.goods_id,
								num: collocation.count,
								sp_value_id: collocation.spec[collocationSpecIndex].sp_value_id,
								is_collocation: 2
							})
						}
					}
					param.collocation_info = JSON.stringify(param.collocation_info);
				} else {
					param = {
						member_id: 101076,
						goods_id: goodsInfo.goods_id,
						sp_value_id: goodsInfo.spec[specIndex].sp_value_id,
						goods_num: goodsInfo.spec[goodsInfo.defaultSpecIndex].count
					}
				}
				server.post("/index/cart/cart_add", param, function(res) {
					if(res.error != 0) {
						Toast(res.message);
						return;
					}
					Toast({
						message: '成功加入购物车！',
						iconClass: 'mint-toast-icon mintui mintui-success',
						duration: 1000
					});
					_this._hideDialog()
				})
			},
			_showSelectMonth() {
				this.shoppingType = 1;
			},
			// 点击选择月份
			_toggleMonthNum(month) {
				const _this = this;
				let goodsDetails = _this.goodsDetails;
				let monthData = goodsDetails.serializeMonth;
				const totalCount = _this.getTotalNum();
				const storeNum = goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_storage
				for(var i = 0; i < monthData.length; i++) {
					if(monthData[i].month === month) {
						if(monthData[i].count > 0) {
							monthData[i].count = 0;
						} else {
							if(totalCount >= storeNum) {
								// monthData[i].count = 0;
								alert("总库存只有" + storeNum);
							} else {
								monthData[i].count = 1;
							}
						}
					}
				}
				_this.$set(_this.goodsDetails, "serializeMonth", monthData)
				//  _this.setData({
				//    "goodsDetails.serializeMonth": monthData
				//  });
				_this.getTotalMonthPrice();
			},
			// 计算月定制 购买总数
			getTotalNum() {
				const totalNum = this.goodsDetails.serializeMonth.reduce(function(count, next) {
					return count += next.count;
				}, 0);
				return totalNum;
			},
			// 月定制，点击按钮增加
			_addMonthNum(month) {
				const _this = this;
				let goodsDetails = _this.goodsDetails;
				let monthData = goodsDetails.serializeMonth;
				let totalCount = _this.getTotalNum();
				const storeNum = goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_storage
				for(var i = 0; i < monthData.length; i++) {
					if(monthData[i].month == month) {
						monthData[i].count++;
						totalCount++;
						if(storeNum < totalCount) {
							monthData[i].count--;
							totalCount--;
							tool.warning("超出库存了");
							return;
						}
						_this.$set(_this.goodsDetails, "serializeMonth", monthData)
					}
				}
				_this.getTotalMonthPrice();
			},
			// 月定制，点击按钮减少
			_minusMonthNum(month) {
				const _this = this;
				let goodsDetails = _this.goodsDetails;
				let monthData = goodsDetails.serializeMonth;
				const storeNum = goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_storage
				for(var i = 0; i < monthData.length; i++) {
					if(monthData[i].month == month) {
						monthData[i].count--;
						_this.$set(_this.goodsDetails, "serializeMonth", monthData)
					}
				}
				_this.getTotalMonthPrice();
			},
			// 计算月定制 总价格
			getTotalMonthPrice() {
				const _this = this;
				let goodsDetails = _this.goodsDetails;
				const totalNum = _this.getTotalNum();
				let totalPrice = 0;
				if(totalNum == 0) {
					totalPrice = 0;
				} else {
					const selectedPrice = goodsDetails.spec[goodsDetails.defaultSpecIndex].goods_mon_price
					totalPrice = selectedPrice * totalNum
				}
				_this.$set(_this.goodsDetails, "totalPrice", totalPrice)
			},
			// 月定制结账
			_monthCustomBuy() {
				const _this = this;
				const goodsDetails = _this.goodsDetails;
				const monthData = goodsDetails.serializeMonth;
				const selectMonth = monthData.filter(function(item) {
					if(item.count > 0) {
						return item;
					}
				});
				if(selectMonth.length < 3) {
					alert("需满3个月起订");
					return;
				}
				const param = {
					goods_id: goodsDetails.goods_id,
					serializeMonth: selectMonth,
					spec: goodsDetails.spec,
					defaultSpecIndex: goodsDetails.defaultSpecIndex,
					spec_name: goodsDetails.spec[goodsDetails.defaultSpecIndex].sp_value_name,
					goods_num: _this.getTotalNum()
				};
				let confirmOrderData = {
					chooseBuyMethod: 1,
					"from": "goodsDetails",
					"data": param,
					"totalPrice": goodsDetails.totalPrice
				}
				// 处理数据，传参
				let sum = 0;
				for(var i = 0; i < confirmOrderData.data.serializeMonth.length; i++) {
					sum += confirmOrderData.data.serializeMonth[i].count;
					confirmOrderData.data.serializeMonth[i].num = confirmOrderData.data.serializeMonth[i].count
				}
				var paramMonth = {
					order_label: confirmOrderData.chooseBuyMethod,
					member_id: 101076,
					goods_id: confirmOrderData.data.goods_id,
					sp_value_id: confirmOrderData.data.spec[confirmOrderData.data.defaultSpecIndex].sp_value_id,
					sum: sum,
					monthlist: JSON.stringify(confirmOrderData.data.serializeMonth)
				};
				this.getSelectGoods(paramMonth);
				this.$router.push('/comfirmOrderDetail')
			},
			// 弹出搭配够
			_show_modal_buy() {
				this.shoppingType = 2;
			},
			// 搭配购点击减少
			_matchMinus(index) {
				const _this = this;
				const matchIndex = index;
				let matchGoods = _this.goodsDetails.collocation[matchIndex];
				const defaultSpecIndex = matchGoods.defaultSpecIndex;
				let count = matchGoods.count ? matchGoods.count : 0;
				const countStr = "goodsDetails.collocation[" + matchIndex + "].count"
				
				if(count <= 0) {
					Toast("不能再少了。")
				} else {
					count--;
					_this.$set(matchGoods, "count", count)
				}
			},
			// 搭配购点击增加
			_matchAdd(index) {
				const _this = this;
				const matchIndex = index;
				let matchGoods = _this.goodsDetails.collocation[matchIndex];
				
				const defaultSpecIndex = matchGoods.defaultSpecIndex;
				let count = matchGoods.count ? matchGoods.count : 0;
				const countStr = "goodsDetails.collocation[" + matchIndex + "].count"
				if(count < matchGoods.spec[defaultSpecIndex].goods_storage) {
					count++;
					_this.$set(matchGoods, "count", count)
				}
			},
			// 搭配购点击确认
			_macthConfirm() {
				const _this = this;
				const matchGoods = _this.goodsDetails.collocation;
				const choosedMatchGoods = matchGoods.filter(function(item) {
					if(item.count && item.count > 0) {
						return item;
					}
				});
				let selectedGoodsInfo = []
				for(var i = 0; i < choosedMatchGoods.length; i++) {
					selectedGoodsInfo.push({
						goods_id: choosedMatchGoods[i].goods_id,
						sp_value_id: choosedMatchGoods[i].spec[0].sp_value_id,
						count: choosedMatchGoods[i].count,
					})
				}
				_this.chooseGeneralBuy();
				_this.$set(_this.goodsDetails, "hasMatch", selectedGoodsInfo.length > 0 ? true : false);
				_this.$set(_this.goodsDetails, "selectedMatch", selectedGoodsInfo);

				//				_this.setData({
				//					'goodsDetails.hasMatch': (selectedGoodsInfo.length > 0 ? true : false),
				//					"goodsDetails.selectedMatch": selectedGoodsInfo
				//				});
			},
			//选择普通商品买法
			chooseGeneralBuy() {
				this.shoppingType = 0;
				this.chooseBuyType.chooseBuyMethod = 0;
				this.chooseBuyType.optionModelName = "general_modal";
				//				this.setData({
				//					chooseBuyMethod: 0,
				//					optionModelName: "general_modal"
				//				});
				//				this.showSelectSpec();
			},
			// 判断使用哪个价格
			_setSelectedPrice() {
				const _this = this;
				const goodsDetails = _this.goodsDetails;
				const defaultSpecIndex = goodsDetails.defaultSpecIndex;
				let spec = goodsDetails.spec;
				let selectedPrice;
				switch(_this.chooseBuyType.chooseBuyMethod) {
					case 0:
						selectedPrice = spec[defaultSpecIndex].goods_price;
						break;
					case 1:
						selectedPrice = spec[defaultSpecIndex].goods_mon_price;
						break;
					case 2:
						selectedPrice = spec[defaultSpecIndex].goods_group_price;
						break;
					case 3:
						selectedPrice = spec[defaultSpecIndex].goods_crowd_price;
						break;
				}
				_this.$set(_this.goodsDetails, "selectedPrice", selectedPrice);
			},
		},
		components: {
			'scroll-y': ScrollY
		}
	}
</script>

<style scoped lang="scss">
	.modal-dialog {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		.modal-content {
			width: 640px;
			margin: 0 30px;
			background-color: #fff;
			border-radius: 8px;
			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px 40px;
				.title {
					line-height: 56px;
					font-size: 40px;
					color: #4A4A4A;
				}
				.modal-cancel-btn {
					color: #ef364e;
					font-size: 32px;
				}
			}
			.modal-body {
				padding: 0 20px;
				max-height: 800px;
				overflow-y: auto;
				.goods-intro-container {
					display: flex;
					justify-content: space-between;
					padding-top: 40px;
					margin-bottom: 60px;
					border-top: 1px solid #dcdcdc;
					.goods-synopsis {
						display: flex;
						flex-direction: column;
						width: 430px;
						.good-title {
							overflow: hidden;
							height: 50px;
							width: 430px;
							margin-bottom: 5px;
							line-height: 50px;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #4A4A4A;
							font-size: 36px;
						}
						.sub-goods-title {
							margin-bottom: 30px;
							font-size: 28px;
							color: #9b9b9b;
							line-height: 40px;
						}
						.goods-price {
							font-size: 36px;
						}
					}
					.goods-thumb-container {
						width: 170px;
						height: 144px;
						flex-shrink: 0;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.goods-specification {
					display: flex;
					flex-wrap: wrap;
					padding-bottom: 40px;
					.goods-active {
						background-color: #F8F8F8;
					}
					span {
						padding: 20px 30px;
						margin-right: 20px;
						margin-bottom: 20px;
						border: 2px solid #e6e6e6;
						border-radius: 8px;
						color: #67666b;
						font-size: 28px;
					}
				}
				.select-quantity {
					display: flex;
					align-items: center;
					padding-bottom: 60px;
					border-bottom: 2px solid #DCDCDC;
					.select-num-btn {
						width: 100px;
						height: 60px;
					}
					.selected-num {
						min-width: 30px;
						padding: 0 30px;
						text-align: center;
						font-size: 36px;
						color: #000;
					}
				}
				.macth-buy-container {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40px 10px 40px 20px;
					border-bottom: 2px solid #DCDCDC;
					.icon-diamond {
						width: 50px;
						height: 50px;
						margin-right: 30px;
					}
					.macth-explain {
						color: #4A4A4A;
						font-size: 32px;
					}
					.flex-grow {
						flex-grow: 2;
					}
					.icon-triangle {
						width: 18px;
						height: 24px;
					}
				}
				.group-people-container {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 25px 0;
					.group-people-title {
						position: relative;
						padding-left: 36px;
						font-size: 24px;
						color: #9B9B9B;
						line-height: 34px;
						margin-bottom: 60px;
					}
					.group-people-title::after {
						position: absolute;
						top: 10px;
						left: 0;
						width: 12px;
						height: 12px;
						border: 2px solid #9B9B9B;
						border-radius: 50%;
						content: "";
					}
					.group-people-list {
						display: flex;
						justify-content: center;
						.group-people-avatar {
							width: 80px;
							height: 80px;
							border-radius: 50%;
							margin: 0 35px;
						}
					}
				}
			}
			.modal-footer {
				padding: 40px 20px;
				display: flex;
				justify-content: space-between;
				.add-cart {
					width: 280px;
					height: 90px;
					line-height: 90px;
					border-radius: 8px;
					background-color: #f8f8f8;
					text-align: center;
					font-size: 28px;
					color: #67666B;
				}
				.go-buy {
					width: 280px;
					height: 90px;
					line-height: 90px;
					border-radius: 8px;
					background: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
					box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
					color: #fff;
					font-size: 30px;
					text-align: center;
				}
				.big-confirm-btn {
					width: 100%;
					height: 90px;
					background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
					box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
					border-radius: 8px;
					color: #fff;
					line-height: 90px;
					text-align: center;
					font-size: 30px;
				}
			}
			/*选择月定制时间*/
			.month-custom-bottom-line {
				position: relative;
			}
			.modal-body {
				padding: 0 20px;
				max-height: 800px;
				box-sizing: border-box;
			}
			.month-scroll {
				max-height: 550px;
				.month-custom-explain {
					position: relative;
					padding-left: 36px;
					color: #9B9B9B;
					font-size: 24px;
				}
				.month-scroll-item {
					display: flex;
					align-items: center;
					padding: 25px 0;
					height: 100px;
					.icon-circle {
						position: relative;
						width: 40px;
						height: 40px;
						overflow: hidden;
						border-radius: 50%;
						margin-right: 30px;
						box-shadow: 2px 0 #c4c4c4 inset, 0 2px #c4c4c4 inset, -2px 0 #c4c4c4 inset, 0 -2px #c4c4c4 inset;
						img {
							position: absolute;
							left: 0;
							top: 0;
						}
					}
					.flex-grow {
						flex-grow: 2;
					}
					.select-month {
						display: flex;
						.select-num-btn {
							width: 100px;
							height: 65px;
						}
						.month-selected-num {
							padding: 0 20px;
							line-height: 65px;
						}
					}
				}
				span {
					font-size: 32px;
					font-family: PingFangSC-Regular;
				}
			}
		}
	}
	
	.flex-grow {
		flex-grow: 2;
	}
</style>